<script setup lang="ts">
import { useRoadnet } from '@/shared/map/roadnet'
import { parseTime } from '@/utils/parseTime'
import { watch } from 'vue'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()
const roadnet = useRoadnet()

const queryFields = [
  {
    prop: 'name',
    title: t('ren-wu-ming-cheng')
  },
  {
    prop: 'memo',
    title: t('bei-zhu')
  }
]

// 每次打开弹窗重新获取数据
watch(
  () => roadnet.roadnetPathDialogVisible,
  async (val) => {
    if (val) {
      roadnet.getList()
    }
  }
)

function timeFormatter(row: any) {
  return parseTime(row.createTime)
}
</script>

<template>
  <el-dialog
    @close="roadnet.closeDialog"
    v-model="roadnet.roadnetPathDialogVisible"
    width="50vw"
    align-center
  >
    <template #header>
      <div class="flex flex-col">
        <span class="mb-3">{{ t('lu-xian-lie-biao') }}</span>
        <el-scrollbar>
          <div class="flex justify-between">
            <div v-for="item in queryFields" :key="item.prop">
              <el-input
                v-model="roadnet.params[item.prop]"
                :placeholder="item.title"
                clearable
              ></el-input>
            </div>
          </div>
        </el-scrollbar>
        <div class="flex pt-2">
          <el-button type="primary" class="mr-2" @click="roadnet.handleQuery">{{
            t('cha-xun')
          }}</el-button>
          <el-button type="info" @click="roadnet.handleReset">{{ t('zhong-zhi') }}</el-button>
        </div>
      </div>
    </template>
    <template #default>
      <div class="flex flex-col">
        <el-table height="50vh" :data="roadnet.list" @selection-change="roadnet.onCurrentChange">
          <el-table-column type="selection" width="55" />
          <el-table-column property="name" :label="t('ming-cheng')" />
          <el-table-column property="memo" :label="t('bei-zhu')" />
          <el-table-column
            property="createTime"
            :label="t('chuang-jian-shi-jian')"
            :formatter="timeFormatter"
          />
          <ElTableColumn :label="t('cao-zuo')">
            <template #default="{ row }">
              <ElButton link @click="() => roadnet.handleDelete(row.id)">
                {{ t('shan-chu') }}
              </ElButton>
            </template>
          </ElTableColumn>
        </el-table>
        <div class="flex justify-end mt-2">
          <el-scrollbar class="mt-2">
            <el-pagination
              layout="sizes, prev, pager, next"
              :total="roadnet.total"
              v-model:current-page="roadnet.params.page"
              v-model:page-size="roadnet.params.limit"
              :page-sizes="[10, 20, 50, 100, 200, 500]"
              @sizeChange="roadnet.getList"
              @currentChange="roadnet.getList"
            />
          </el-scrollbar>
        </div>
      </div>
    </template>
    <template #footer>
      <el-button size="large" type="primary" class="w-full" @click="roadnet.onComfirm">{{
        t('que-ding')
      }}</el-button>
    </template>
  </el-dialog>
</template>
